<template>
  <div id="app-container">
    <!--条件查询表单-->
<!--    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="image.name" placeholder="品牌名称"/>
      </el-form-item>
      <el-form-item>
        <el-input v-model="image.letter" placeholder="品牌首字母"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>-->

      <el-button type="primary" icon="el-icon-search" @click="handleToAdd">添加</el-button>
<!--    </el-form>-->
    <!--数据显示列表-->
    <el-table :data="datalist" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column  label="图片" width="100px" >
        <template slot-scope="scope">
          <img :src="scope.row.url" v-model="scope.row.url" width="100px">
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleRemove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    dialog对话框-->

    <!-- Dialog：添加和修改视频表单 -->
    <el-dialog :visible.sync="dialogImageFormVisible" title="品牌">
      <el-form :model="form" label-width="120px">

        <el-form-item label="图片">
          <el-upload
            name="file"
            class="avatar-uploader"
            action="http://localhost:8080/upload/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="form.url" :src="form.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogImageFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!--    分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[ 3, 5, 7]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
//引入image
import image from '../../api/image'
export default {

  data(){
    return{
      image:{},         //品牌对象实体
      datalist:[],      //数据模型列表
      imgUrl:"",        //品牌图片的地址
      currentPage:1,   //当前页
      pageSize:2,      //每页显示多少条
      total:0,         //总记录数
      dialogImageFormVisible:false, //添加或者修改的对话框
      form:{
        url:"",
      },           //对话框的对象
      imageParent:[],    //品牌的父id查询出来的image


    }
  },
  methods:{
    //清空条件框
    resetData(){
      this.image={};
    },
    //点击修改
    handleEdit(id){
      //根据id查询数据
      image.queryById(id).then(res=>{
        this.form=res.data;
        this.getimageAll();

      });
      //显示弹窗
      this.dialogImageFormVisible=true;
    },
    //点击删除
    handleRemove(id){
      //警示
      this.$confirm("是否确定删除？", "提示", {type: "warning"}).then(()=>{
        image.removeById(id).then(res=>{
          this.$message.success(res.message);
          this.getList();
        })
      }).
      catch(()=>{
        this.$message.warning("取消")
      })

    },
    //每页显示多少条发生改变
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.getList();
    },
    //当前页发生改变
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.getList();
    },
    //查询所有数据
    getList(value){
      //点击查询
      if (value==-1){
        this.currentPage=1;
      }
      image.getList(this.currentPage,this.pageSize,this.image).then(res=>{
        console.log(res.data.data)
        //赋值
        this.datalist=res.data.data;
        this.total=res.data.total;
      })
    },
    //添加品牌
    handleToAdd(){
      //清空表单
      this.form={url:""};
      this.dialogImageFormVisible=true;
      //显示所有的父品牌
      this.getimageAll();
    },
    //图片上传成功
    handleAvatarSuccess(res, file){
      this.form.url ="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
      this.imgUrl="http://rj0158yod.hd-bkt.clouddn.com/"+ res.data;
    },
    //图片允许的格式（上传之前）
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //提交添加或者修改的表单
    handleSubmit(){
      if (this.form.id !=null){
        //编辑
        image.modify(this.form).then(res=>{
          this.$message.success(res.message);
          this.getList();
          //关闭
          this.dialogImageFormVisible=false;
        })
      }
      else {
        //添加
        image.add(this.form).then(res=>{
          this.$message.success(res.message);
          this.getList();
          //关闭
          this.dialogImageFormVisible=false;
        })
      }
    },
    //下拉框改变
    change(){},
    //根据父id查询父品牌
    getimageByParentId(parentId){
      image.queryimageByParentId(parentId).then(res=>{
        this.imageParent=res.data;
      })
    },
    //查询所有的父品牌
    getimageAll(){
      image.queryimageAll().then(res=>{
        this.imageParent=res.data;
      })
    }

  },
  created() {
    this.getList();

  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

